<template>
  <div class="containers">
    <div id="canvas"></div>
  </div>
</template>

<script>

import { onMounted, reactive, toRefs } from 'vue'
import BpmnViewer from 'bpmn-js'
import { xmlStr } from '../mock/xmlStrViewer'

export default {
  name: 'BpmnViewer',
  setup () {
    const state = reactive({
      xmlStr: '',
      bpmnViewer: null,
      canvas: null
    })
    onMounted(() => {
      state.xmlStr = xmlStr
      init()
    })

    const init = () => {
      state.bpmnViewer = new BpmnViewer({
        container: '#canvas'
      })
      state.bpmnViewer.importXML(state.xmlStr).then(function (result) {
        const { warnings } = result
        console.log('success !', warnings)
        state.canvas = state.bpmnViewer.get('canvas')
        state.canvas.zoom('fit-viewport', 'auto')
        // 标记颜色（1）
        markColor1()
        // 标记颜色（2）---延迟
        markColor2()
      }).catch(function (err) {
        const { warnings, message } = err
        console.log('something went wrong:', warnings, message)
      })
    }

    const markColor1 = () => {
      // 添加颜色（1）
      state.canvas.addMarker('Activity_1149ksn', 'highlight')
    }

    const markColor2 = () => {
      // 添加颜色（2）
      const overlays = state.bpmnViewer.get('overlays')
      console.log('overlays !', overlays)
      const elementRegistry = state.bpmnViewer.get('elementRegistry')
      console.log('elementRegistry !', elementRegistry)
      const shape = elementRegistry.get('Activity_1w1vj9r')

      const layDiv = '<div class="highlight-overlay" style="width: ' + shape.width + 'px;height: ' + shape.height + 'px"></div>'

      overlays.add(shape.id, {
        position: {
          top: 0,
          left: 0
        },
        html: layDiv
      })
    }

    return {
      ...toRefs(state),
      init
    }
  }
}
</script>

<style scoped>
  .containers {
    background: white;
    overflow: auto;
    background-image: linear-gradient(
      90deg,
      rgba(220, 220, 220, 0.5) 6%,
      transparent 0
    ),
    linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
    background-size: 12px 12px;
    width: 100%;
    height: calc(100vh - 60px);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }

  #canvas, #canvas > div {
    width: 100%;
    height: 100%;
  }

</style>
